<script setup>
import LfDialog from '@/components/commonUI/LfDialog.vue'
import { usePostDetailQuery } from '@/composables/usePostDataQuery'
import { useRoute, useRouter } from 'vue-router'
import PostDetailContent from './components/PostDetailContent.vue'
import PostDetailGalleryPics from './components/PostDetailGalleryPics.vue'
import PostDetailReply from './components/PostDetailReply.vue'
import { decryptUrl } from '@/utils/dataUtils'
defineProps({
  visible: Boolean,
})

const route = useRoute()
const router = useRouter()

const postId = ref(route.params.id)

const { data: detailData } = usePostDetailQuery(postId)

const handleClose = () => {
  router.push(route.path.replace(/\/post.*/, ''))
}
</script>

<template>
  <LfDialog width="1200px" height="95vh" :isShow="visible" @close="handleClose">
    <div class="bg-[--fill-0] overflow-hidden flex h-full">
      <div v-if="detailData?.result?.media?.length > 0" class="bg-[--fill-b] w-[600px]">
        <div v-if="detailData?.result?.type === 2" class="h-full">
          <video
            :src="JSON.parse(decryptUrl(detailData?.result?.media[0]))[0]"
            class="w-full h-full object-contain"
            controls
            autoplay
            muted />
        </div>

        <PostDetailGalleryPics v-else :media="detailData?.result?.media" />
      </div>
      <div class="flex-1">
        <PostDetailContent :data="detailData?.result" :postId="postId" :isGallery="true" />
        <PostDetailReply :postId="detailData?.result?.id" />
      </div>
    </div>
  </LfDialog>
</template>

<style scoped lang="scss"></style>
